<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Admin - Change Password</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<jsp:include page="../includeFiles.jsp" ></jsp:include>

</head>

<body class="left-sidebar">

<!-- Session check : user logged in or not/ press back button -->
<jsp:include page="../common/checkSession.jsp"></jsp:include>
<jsp:include page="../common/checkAdminRole.jsp" />

	<!-- Wrapper -->
	<div id="wrapper">

		<!-- Content -->
		<div id="content">
			<div id="content-inner">				
						<div id="login_content">
						<header>
							<h2>Change Password</h2>
						</header>
						<span class="error_msg">${errorMessage}</span>
						<span class="success_msg">${successMessage}</span>
						<!-- js validation Error display -->
						<div class="submit_errors_msg">
							<ul>
								<li id="submit_is_field_empty" class="submit_errors">All fields are required.</li>
								<li id="submit_pass_error" class="submit_errors">Password : at least 8 characters, 1 upper-case, number & special character.</li>
								<li id="submit_pass_compare_error" class="submit_errors">Passwords must be similar.</li>
							</ul>
						</div>
						
						<form name="changePasswordForm" action="${pageContext.request.contextPath}/ChangePasswordServlet" method="post" >
							
							<!-- Enter old Password -->
							<div>
								<label>Current Password:</label> 
								<input name="oldpassword" id="oldpassword" type="password" placeholder="Old Password" maxlength="32" tabindex="1">
							</div>
							<!-- Enter new Password -->
							<div>
								<label>New Password:</label> 
								<input id="newpassword" name="newpassword" type="password" placeholder="New Password" maxlength="32" tabindex="2">
							</div>
							<!-- Password Validation error and success message area. -->
							<div id="pass_error" class="error_info">
								<ul>
									<li id="letter" class="invalid">At least <strong>one letter</strong></li>
									<li id="capital" class="invalid">At least <strong>one capital letter</strong></li>
									<li id="number" class="invalid">At least <strong>one number</strong></li>
									<li id="length" class="invalid">Be at least <strong>8 characters</strong></li>
									<li id="character" class="invalid">At least <strong>one special character</strong></li>
								</ul>
							</div>
							<!-- Re-enter new Password -->
							<div>
								<label>Confirm Password:</label> 
								<input id="new_repassword" name="new_repassword" type="password" placeholder="Re-enter Password" maxlength="32" tabindex="3">
							</div>
							<!-- Compare Passwords. -->
							<div id="compare_pass_error" class="error_info">
								<ul>
									<li id="compare_pass" class="invalid">Passwords must be similar & non-empty.</li>
								</ul>
							</div>							
							<div>	
								<input type="submit" value="Change" class="button" tabindex="3">
							</div>
						</form>
					</div>
					
			</div>
		</div>
		
		<!-- Sidebar -->
		<div id="sidebar">

			<!-- Sidebar Header - Logo & Name -->
			<jsp:include page="../common/sidebarHeader.jsp" ></jsp:include>

			<jsp:include page="adminMenu.jsp" />
							
			<!-- Sidebar Footer Content -->
			<jsp:include page="../common/sidebarFooter.jsp" />

		</div>

	</div>
	<script type="text/javascript">
		$(function(){
			$("#passChange").addClass("current_page_item");
		});
	</script>
	
	<script type="text/javascript">
		$(".submit_errors_msg").hide();
		$(".submit_errors").hide();
		
		function checkFormErrors(){
			if(isAnyFieldEmpty($('#oldpassword'),$('#newpassword'),$('#new_repassword'))){
				return checkForm($('#submit_pass_error'),$('#submit_pass_compare_error'));
			}
			return false;
		}
		
		$("#newpassword").keyup(function() {
			isPasswordValid($("#newpassword"));
		});
		$("#new_repassword").keyup(function() {
			isPasswordSame($("#newpassword"),$("#new_repassword"));
		});
	</script>
</body>
</html>